<template>
  <div class="home">
    <!-- <div class="home">Hello, {{ userInfoStore.name }}</div> -->
    <Monitor></Monitor>
    <Search></Search>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import Monitor from "./monitor/index.vue"
import Search from "./search/index.vue"
import Footer from "./footer/index.vue"
export default {
  name: "Home",
  components: { Monitor, Search, Footer },
}
</script>
<script lang="ts" setup>
import { onMounted } from "vue"
import { useUserInfoStore } from "@/stores/userInfo"
import { useReportDataStore } from "@/stores/reportData"
const reportDataStore = useReportDataStore()
const userInfoStore = useUserInfoStore()

onMounted(() => {
  reportDataStore.getReportData()
})
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  /* font-size: 30px; */
  background-color: #eee;
}
</style>
